<template>
    <div class="jianzhan-content">
        <Crumb name="出口"></Crumb>
        <div class="content">
            <el-button
                    type="primary"
                    @click="openAdd"
            >新增出口单
            </el-button>
            <Search>
                <el-input
                        v-model="key"
                        size="small"
                        class="input"
                        placeholder="查找出发港口"
                        prefix-icon="el-icon-search"
                ></el-input>
            </Search>
            <div class="table-wrapper">
                <el-table
                        :data="exportList"
                        border
                        stripe
                        style="width: 100%">
                    <el-table-column
                         prop="dispatchDateStr"
                         label="日期"
                     >
                    </el-table-column>
                    <el-table-column
                            prop="dispatchPort"
                            label="港口"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="ship"
                            label="船名船次"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="boxTotal"
                            label="总件数"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="ladingNumber"
                            label="提单号"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="contractNumber"
                            label="合同号"
                    >
                    </el-table-column>
                    <el-table-column
                         prop="columnProp"
                         label="下载箱单"
                     >
                        <template slot-scope="scope">
                            <div v-for="item in scope.row.packingList" :key="item">
                                <a :href="item" target="_blank">{{item}}</a>
                            </div>
                        </template>
                    </el-table-column>

                </el-table>
                <div class="page">
                    <el-pagination background
                                   @current-change="changePage"
                                   layout="prev, pager, next"
                                   :total="total"></el-pagination>
                </div>

            </div>

            <div class="modal-wrapper">
                <el-dialog
                        title="出口"
                        :visible.sync="dialogVisible"
                        width="80%"
                        >
                    <el-form ref="form" :model="ruleForm" :rules="rule" label-width="100px" style="text-align: left">
                        <el-form-item label="日期" prop="dispatchDateStr">
                            <el-date-picker v-model="ruleForm.dispatchDateStr" value-format="yyyy-MM-dd" placeholder="选择日期" size="small"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="发运港口" prop="dispatchPort">
                            <el-input v-model="ruleForm.dispatchPort" placeholder="发运港口" size="small"></el-input>
                        </el-form-item>
                        <el-form-item label="船名船次" prop="ship">
                            <el-input v-model="ruleForm.ship" placeholder="船次，多个使用,分割" size="small"></el-input>
                        </el-form-item>
                        <el-form-item label="合同号" prop="contractNumber">
                            <el-input v-model="ruleForm.contractNumber" placeholder="合同号，多个用，分割"></el-input>
                        </el-form-item>
                        <el-form-item label="提单号" prop="ladingNumber">
                            <el-input v-model="ruleForm.ladingNumber" placeholder="提单号，多个用，分割" size="small"></el-input>
                        </el-form-item>
                        <el-form-item label="总箱数" >
                            <el-input v-model="ruleForm.boxTotal" placeholder="总箱数" size="small"></el-input>
                        </el-form-item>
                        <div>
                            <label for="file" class="label-btn">上传箱单</label>
                            <input type="file" id="file" @change="fileChange" v-show="false">
                            <div class="file-list">
                                <div :key="item" v-for="item in fileList" class="file-item">
                                    <a :href="item" target="_blank">{{item}}</a>
                                </div>
                            </div>
                        </div>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="submitForm">确认</el-button>
                    </span>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
    import Crumb from '@/components/common/crumb'
    import Search from '@/components/common/search'
    import mixins from '../../util/mixins'
    import {getExportList,addExport} from "../../api/contract";
    import {upLoadFiles} from "../../api";
    import {ERROR_OK} from "../../util/config";

    export default {
        name: "export",
        mixins:[mixins],
        data() {
            return {
                list:[],
                ruleForm: {
                    dispatchDateStr:'',
                    dispatchPort:'',
                    contractNumber:'',
                    ladingNumber:'',
                    ship:'',
                    packingList:'',
                    boxTotal:''
                },
                fileList:[],
                rule: {
                    dispatchDateStr: [
                        { required: true, message: '日期不能为空', trigger: 'blur' },
                    ],
                    dispatchPort: [
                        { required: true, message: '发运港口不能为空', trigger: 'blur' }
                    ],
                    contractNumber: [
                        {  required: true, message: '合同号不能为空', trigger: 'change' }
                    ],
                    ladingNumber: [
                        {  required: true, message: '提单号不能为空', trigger: 'blur' }
                    ],
                    ship: [
                        {  required: true, message: '船号不能为空', trigger: 'blur' }
                    ],
                },
                key: '',
                dialogVisible:false
            }
        },
        clear(){
            this.ruleForm = {
                dispatchDateStr:'',
                    dispatchPort:'',
                    contractNumber:'',
                    ladingNumber:'',
                    ship:'',
                    packingList:'',
                    boxTotal:''
            };
            this.fileList = []
        },
        created(){
            this.getExportList()
        },
        computed:{
            exportList(){
                return this.list.filter(item=>item.dispatchPort.includes(this.key)).slice((this.pageNum-1)*this.pageSize,this.pageNum * this.pageSize)
            }
        },
        methods: {
            submitForm() {
                this.$refs.form.validate(async valid => {
                    if (valid) {
                        this.ruleForm.packingList = this.fileList.join(',');
                        const {status} = await addExport(this.ruleForm);
                        if(status === ERROR_OK) {
                            this.$notify.success('添加出口单成功');
                            this.clear();
                            this.getExportList();
                            this.dialogVisible = false
                        }
                    }
                })
            },
            async getExportList(){
                const {status ,data,msg} = await getExportList();
                if(status === ERROR_OK) {
                    this.list = data;
                } else {
                    this.$notify.error(msg)
                }
            },
            async fileChange(e){
                const formData = new FormData();
                Array.prototype.forEach.call(e.target.files,item=>{
                    formData.append('upload_file',item)
                });
                const {success,file_path} = await upLoadFiles(formData);
                if(success) {
                    this.fileList = file_path
                }
            },
            clear(){
                this.ruleForm.title = '';
                this.ruleForm.customerName = '';
                this.ruleForm.times = '';
                this.ruleForm.address = '';
                this.ruleForm.detail = '';
            },
            openAdd(){
                this.clear();
                this.dialogVisible = true
            }
        },
        watch:{
            exportList(list){
                this.total = list.length
            }
        },
        components: {
            Crumb, Search
        }
    }
</script>

<style scoped lang="scss">
    @import "../../css/mixins";
    @import "../../css/variable";
    .content{
        @include content
    }
    .label-btn{
        display: block;
        width: 150px;
        height: 30px;
        line-height: 30px;
        background-color: $bg-theme;
        color: white;
        padding: 0 5px;
        cursor: pointer;
        border-radius: 3px;
        text-align: center;
    }
    .file-list{
        font-size: 16px;
        .file-item{
            height: 25px;
            line-height: 25px;
            border-bottom: 1px solid #ddd;

        }
    }
</style>